<template>
	<view class="top-cell" v-if="ifShow" @click="url!=''?toUrl(linkType):''">
		<view class="c-cell">
			<view class="c-cell-title" :style="titleStyle"><image v-if="showIcon" class="c-icon" :src="icon" mode=""></image>{{title}}</view>
			<view class="c-cell-value" :style="valueStyle">{{value}}
				<image v-if="isLink" class="c-jt" :src="'/static/images/jt_'+arrowDirection+'.png'" mode=""></image>
			</view>
		</view>
		<view class="c-slot" :style="contentStyle" v-if="showContent"> 
			<slot />
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			title:{
				type:String,
				required:true
			},
			value:{
				type:String,
				required:true
			},
			titleStyle:{
				type:String,
				default:"font-size:30rpx;color:#323233;"
			},
			valueStyle:{
				type:String,
				default:"font-size:30rpx;color:#969799;"
			},
			contentStyle:{
				type:String,
				default:"font-size:30rpx;color:#969799;line-height:36rpx;"
			},
			icon:{
				type:String,
			},
			iconSize:{
				type:[String,Number],
				default:20
			},
			isLink:{
				type:Boolean,
				default:false
			},
			arrowDirection:{ //箭头方向，可选值为 right top down
				type:String,
				default:"right"  
			},
			url:{
				type:String,
			},
			linkType:{
				type:String,
				default:"navigateTo"//navigateTo:保留当前页面，跳转到应用内的某个页面,
									//redirectTo:关闭当前页面，跳转到应用内的某个页面
									//reLaunch:关闭所有页面，打开到应用内的某个页面
									//switchTab:跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
			}
		},
		data(){
			return{
				ifShow:true,
				showValue:true,
				showContent:true,
				showIcon:true
			}
		},
		created() {
			this.init()
		},
		mounted() {
			this.showContent = this.$slots.default?true:false
		},
		methods:{
			init:function(){
				if(this.title == ""){
					this.ifShow = false
				}
				if(this.value == ""){
					this.showValue = false
				}
				if(this.icon == ""){
					this.showIcon = false
				}
			},
			toUrl:function(type){
				switch(type){
					case "navigateTo":
						uni.navigateTo({
							url:this.url
						})
					break;
					case "redirectTo":
						uni.redirectTo({
							url:this.url
						})
					break;
					case "reLaunch":
						uni.reLaunch({
							url:this.url
						})
					break;
					case "switchTab":
						uni.switchTab({
							url:this.url
						})
					break;
				}
			}
		}
	}
</script>

<style scoped>
	.top-cell{
		width: 100%;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #ebedf0;
	}
	.c-cell{
		width: 100%;
		padding-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.c-icon{
		margin-right: 20rpx;
	}
	.c-cell-title{
		display: flex;
		align-items: center;
	}
	.c-cell-value{
		display: flex;
		align-items: center;
		line-height: 42rpx;
	}
	.c-slot{
		width: 100%;
		line-height: 28rpx;
		padding-top: 20rpx;
	}
	.c-jt{
		display: block;
		width: 46rpx;
		height: 46rpx;
		margin-right: -10rpx;
	}
	.c-icon{
		width: 40rpx;
		height: 40rpx;
		display: block;
	}
</style>
